<template>
    <div class="preciew-test">
            <div class="test-width">
               	<h3>{{name}}</h3>
                <p class="test-details">（考试时长：{{duration}}分钟&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;及格分数：{{passScore}}分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;试题数目：{{totalSubject}}题）</p>
                <Table :columns="columns1" :data="data1" border></Table>
                <div class="preciew-test-content">
                    <h4 >一、单选题</h4>
                    <div v-for="(v,i) in contentBox.radioBox">
                        <strong>{{i+1}}、{{v.question}}</strong>
                         <div class="option"><p v-for="v1 in v.option">{{v1}}</p></div>
                    </div>
                    <h4 >二、多选题</h4>
                    <div v-for="(v,i) in contentBox.checkBox">
                        <strong>{{i+1}}、{{v.question}}</strong>
                        <div class="option"><p v-for="v1 in v.option">{{v1}}</p></div>
                    </div>
                    <h4 >三、判断题</h4>
                    <div v-for="(v,i) in contentBox.judgeBox">
                        <strong>{{i+1}}、{{v.question}}</strong>
                         <div class="option"><p v-for="v1 in v.option">{{v1}}</p></div>
                    </div>
                </div>
            </div>
    </div>
</template>
<script>
import Cookies from 'js-cookie';
export default {
    components:{
        
    },
    created:function(){
     	this.editId=this.$route.query.id;
        var that=this;
        this.axios({
            method:'get',
            url:that.$store.state.app.globalUrl+'/admin/TestPaper/getDetail?id='+that.editId,
        }).then(function(res){
            that.name=res.data.data.testPaper.name,
            that.duration=res.data.data.testPaper.duration,
            that.totalPoints=res.data.data.testPaper.totalPoints,
            that.passScore=res.data.data.testPaper.passScore,
            that.type=res.data.data.testPaper.type,
            that.status=res.data.data.testPaper.status,
            that.subjectArr=JSON.parse(res.data.data.testPaper.allSubject)
        })
    },
    data() {
        return {
        	//id
            editId:'',
            name: '',
            duration: '',
            totalPoints: '',
            passScore: '',
            type:'',
            status:'',
            //题目
            subjectArr:[],
            // 表格
            columns1:[
                {
                    title: '单选题',
                    key: 'radio',
                    align:'center'
                    
                },
                {
                    title: '多选题',
                    key: 'checkbox',
                    align:'center'
                    
                },
                {
                    title: '判断题',
                    key: 'judge',
                    align:'center'
                    
                },
                {
                    title: '总分',
                    key: 'totalScore',
                    align:'center'
                    
                }
            ]
        }
    },
    methods: {
        
    },
    computed:{
        // 总共的题目
        totalSubject:function(){
            var num=0;
            this.subjectArr.forEach(function(subjectArr){
                num=num+subjectArr.list.length
            })
            return num;
        },
        data1:function(){
            var obj={radio:0,checkbox:0,judge:0,totalScore:this.totalPoints};
            var arr=[obj];
            this.subjectArr.forEach(function(subjectArr){
                if(subjectArr.type=='1'){
                    obj.radio=obj.radio+(subjectArr.list.length*subjectArr.unitScore)
                }
                if(subjectArr.type=='2'){
                    obj.checkbox=obj.checkbox+(subjectArr.list.length*subjectArr.unitScore)
                }
                if(subjectArr.type=='3'){
                    obj.judge=obj.judge+(subjectArr.list.length*subjectArr.unitScore)
                }
            })
           return arr;
        },
       contentBox:function(){
          	var objBox={radioBox:[],checkBox:[],judgeBox:[]};
           	this.subjectArr.forEach(function(subjectArr){
                if(subjectArr.type=='1'){
                    objBox.radioBox=objBox.radioBox.concat(subjectArr.list)
                }
                if(subjectArr.type=='2'){
                    objBox.checkBox=objBox.checkBox.concat(subjectArr.list)
                }
                if(subjectArr.type=='3'){
                    objBox.judgeBox=objBox.judgeBox.concat(subjectArr.list)
                }
            })
           //单选的选项
			objBox.radioBox.forEach(function(data3,j){
				objBox.radioBox[j].option=data3.option.split(';');
			})
			//多选的选项
			objBox.checkBox.forEach(function(data3,j){
				objBox.checkBox[j].option=data3.option.split(';')
			})
			//判断的选项
			objBox.judgeBox.forEach(function(data3,j){
				objBox.judgeBox[j].option=data3.option.split(';')
			})
           	return objBox;
       	} 
    },
};
</script>
<style scoped>
.test-width{width: 60vw;margin:0 auto;padding:5vw 5vw;background: #fff;box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);transition: all .2s ease-in-out;position: relative;}
.preciew-test h3{text-align: center;}
.preciew-test p.test-details{text-align: center;margin-top:20px;margin-bottom: 40px }
.preciew-test .preciew-test-content{margin-top: 50px}
.preciew-test-content h4{margin-top: 20px;font-size: 16px}
.preciew-test-content div{margin-top: 20px}
.preciew-test-content div strong{font-weight: 700;}
.preciew-test-content .option{margin-left: 20px;margin-top: 5px;}
.preciew-test-content .option p{margin-right: 10%;display: inline-block;}
</style>